<template>
	<view>
		<view class="padding">
			<view class="card">
				<image class="img" src="../../static/images/card1.png" mode="aspectFit"></image>
			</view>

			<swiper vertical class="notice" autoplay :interval="3000" :duration="1000">
				<swiper-item v-for="(i,k) in notice" :key="i.id">
					<view class="item" @click="$u.route('/pages/mine/msg?id=' + i.id)">
						<image class="img" src="../../static/images/notice.png" mode="aspectFill"></image>
						<view class="text">
							{{i.content}}
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="bubbles">
			<view class="bubble" :class="{ on: on==0 }" @click="on=0">皆有云</view>
			<view class="bubble" :class="{ on: on==1 }" @click="on=1">游戏挖矿</view>
			<view class="bubble" :class="{ on: on==2 }" @click="on=2">存储挖矿</view>
			<view class="bubble" :class="{ on: on==3 }" @click="on=3">行驶挖矿</view>
			<view class="bubble" :class="{ on: on==4 }" @click="on=4">共享挖矿</view>
			<view class="circle circle1"></view>
			<view class="circle circle2"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				on: 0,
				notice: []
			}
		},
		methods: {
			getNotice() {
				this.$u.get('/notice/list').then(res => {
					this.notice = res.data.result.notice
				})
			}
		},
		onShow() {
			this.getNotice();
			this.show = true
		},
		onHide() {
			this.show = false
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes idle {
		0%, 100% {
		    transform: translate(0, 0);
		}
		25% {
		    transform: translate(-8rpx, -8rpx);
		}
		50% {
		    transform: translate(0, 8rpx);
		}
		75% {
		    transform: translate(8rpx, -8rpx);
		}
	}
	@keyframes rotate {
		0% {
		    transform: translate(-50%, -50%) rotate(0);
		}
		50% {
		    transform: translate(-50%, -50%) rotate(-180deg);
		}
		100% {
			transform: translate(-50%, -50%) rotate(-360deg);
		}
	}
	
	.bubbles {
		display: flex;
		margin-top: -80rpx;
		padding: 0 30rpx;
		position: relative;
		height: 700rpx;
		
		.circle {
			width: 500rpx;
			height: 500rpx;
			border-radius: 88% 77%;
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 8;
			transform: translate(-50%, -50%);
		}
		.circle1 {
			border: 1px solid rgba(255,255,255,0.3);
			animation: rotate 8s linear infinite;
		}
		.circle2 {
			border: 1px solid rgba(255,255,255,0.5);
			animation: rotate 8s 2s linear infinite;
		}
	}
	.bubble {
		position: absolute;
		background-color: #242644;
		z-index: 9;
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		box-shadow: 0 0 0 2rpx #029394 inset, 0 0 30rpx #029394 inset;
		animation: idle 7s linear infinite;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #009595;
		font-weight: bold;
		font-size: 36rpx;
		letter-spacing: 2rpx;
		transition: all 0.5s;
		
		&::before {
			background-color: #fff;
			border-radius: 50%;
			content: "";
			display: block;
			opacity: 0.5;
			position: absolute;
			top: 32rpx;
			left: 32rpx;
			width: 40rpx;
			height: 24rpx;
			transform: rotate(-45deg);
		}
		
		&.on {
			box-shadow: 0 0 0 2rpx #0cf inset, 0 0 30rpx #0cf inset;
		}
		
		&:nth-child(1) {
			animation-delay: 1s;
			top: 36%;
			left: 36%;
		}
		&:nth-child(2) {
			animation-delay: 0s;
			top: 12%;
			left: 12%;
		}
		&:nth-child(3) {
			animation-delay: 2s;
			top: 13%;
			right: 13%;
		}
		&:nth-child(4) {
			animation-delay: 1.5s;
			left: 11%;
			bottom: 12%;
		}
		&:nth-child(5) {
			animation-delay: 0s;
			right: 11%;
			bottom: 12%;
		}
	}

	.card {
		width: 100%;

		.img {
			width: 100%;
			height: 300rpx;
		}
	}

	.notice {
		margin: 50rpx auto;
		height: 80rpx;
		background: #2B2D46;
		color: #636272;
		border-radius: 50rpx;

		.item {
			width: 100%;
			height: 100%;
			padding: 0 40rpx;
			display: flex;
			align-items: center;
		}

		.img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		.text {
			width: 540rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.ball-wrapper {
		width: 500rpx;
		height: 500rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}
</style>
